<template>
    <div>
        <div class="tou">
            <img src="../img/u1267.png" alt="">
        </div>
        <div class="f1">
            <!-- <div class="figure">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641554049&t=8e40c9e5faebcfa48bc8ca5dc5dd6a4b" alt="">
                <hgroup>蕾丝婴儿蓝长袖圆</hgroup>
                <figcaption>￥100 <span>￥200</span></figcaption>
                <p>立即购买</p>
            </div> -->
            <div class="figure" v-for="item in list" :key="item.id">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641554049&t=8e40c9e5faebcfa48bc8ca5dc5dd6a4b" alt="">
                <hgroup>{{item.nickname}}</hgroup>
                <figcaption>￥{{item.money}} <span>{{item.price}}</span></figcaption>
               <router-link :to="'/topic1'"> <p>立即购买</p></router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:57,
                        money:100,
                        price:200,
                    },
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:58,
                        money:100,
                        price:200,
                    },
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:59,
                        money:100,
                        price:200,
                    },
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:60,
                        money:100,
                        price:200,
                    },
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:61,
                        money:100,
                        price:200,
                    },
                    {
                        nickname:"蕾丝婴儿蓝长袖圆",
                        id:62,
                        money:100,
                        price:200,
                    },
                ]
            }
        },
        methods:{
            
        }
    }
</script>

<style scoped>
.tou img{
    width: 100vw;
    height: 20vh;
}
.f1{
    width: 90vw;
    height: 100vh;
    margin-left: 5vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 3vh;
}
.figure{
    line-height: 4vh;
    margin-bottom: 2vh;
}
.figure img{
    width: 42vw;
    height: 20vh;
}
hgroup{
    color: #666;
    font-size: 16px;
}
.figure span{
    text-decoration: line-through;
    color: #999999;
    margin-left: 5vw;
}
figcaption{
    color: red;
}
.figure p{
    width: 42vw;
    height: 5vh;
    background: red;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 5vh;
    border-radius: 8px;
}
</style>